<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<!-- Bootstrap -->
<!-- TODO 考虑删除这个引用 -->
<link href="<%=request.getContextPath() %>/static/css/jumbotron.css" rel="stylesheet">

<link href="<%=request.getContextPath() %>/static/css/topic.css" rel="stylesheet">

<script src="<%=request.getContextPath() %>/static/js/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/navheader.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
  <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
  
<![endif]-->

<title>招招社区</title>

</head>
<body>

<jsp:include page="Common/navHeader.jsp"></jsp:include>

<div class="container-fluid allcontent">
	<div class="row">
		<div class="col-xs-1"></div>
		<div class="col-xs-10 col-md-7" style="padding-right:30px">
			<h3>已关注的话题</h3>
			<div class="row" style="background:white;border-radius:8px">
				<c:forEach var="item" items="${topics}">
					<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
						<div id="topic-subscribe-img">
							<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="暂无图片"/>
						</div>
						<div id="topic-subscribe-name">
							#${item.topicname }#
						</div>
						<div id="topic-subscribe-detail">
							问答:${item.questions.size() }&nbsp;&nbsp;关注：0
						</div>
					</div>
				</c:forEach>
			</div>
			<div class="row" id="topic-subscribe-more" >
				<div><a>展开更多</a></div>
			</div>	
	
			<h3>话题广场</h3>
			<div class="row topic-square-area">
				<c:forEach var="item" items="${topics}">
				
				
					<div class="col-xs-12 col-sm-6">
							<div class="topic-square-img">
								<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="暂无图片"/>
							</div>
							<div class="topic-square-section">
								<div class="topic-square-name">
									#${item.topicname }#
								</div>
								<div class="topic-square-detail">
									问答:<span style="color:green">${item.questions.size() }</span>&nbsp;&nbsp;关注：<span style="color:green">0</span>
								</div>
								<div class="topic-square-content" >
									${item.questions[0].qcontent }
								</div>
							</div>
					</div>
				</c:forEach>
				
				
			</div>
			<div class="row" id="topic-subscribe-more" >
				<div><a>展开更多</a></div>
			</div>	
		</div>
		 
		<div class="col-xs-0 col-md-3">
			<div class="row slide-section">
				  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					  <!-- Indicators -->
					  <ol class="carousel-indicators">
					    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
					    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
					  </ol>
					
					  <!-- Wrapper for slides -->
					  <div class="carousel-inner" role="listbox">
					    <div class="item active">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=1"><img src="<%=request.getContextPath() %>/static/image/CTM-1.jpg" alt=""></a>
					      <div class="carousel-caption">
					        ...
					      </div>
					      <div class="row slidename">许浩</div>
					    </div>
					    
					     <div class="item">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=20">
					      <img src="<%=request.getContextPath() %>/static/image/CTM-2.jpg" alt=""></a>
					      <div class="carousel-caption">
					        ...
					      </div>
					      <div class="row slidename">周武爱</div>
					    </div>
					    
					      <div class="item">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=25">
					      <img src="<%=request.getContextPath() %>/static/image/CTM-3.jpg" alt=""></a>
					      <div class="carousel-caption">
					        ...
					      </div>
					      <div class="row slidename">周长江</div>
					    </div>
					      <div class="item">
					      <a href="<%=request.getContextPath() %>/GoodItem/ShowGoodItem?id=42">
					      <img src="<%=request.getContextPath() %>/static/image/CTM-4.jpg" alt=""></a>
					      <div class="carousel-caption">
					      </div>
					      <div class="row slidename">姚康</div>
					    </div>
					   
					    
					  </div>
					
					  <!-- Controls -->
					  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					    <span class="sr-only">前一个</span>
					  </a>
					  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					    <span class="sr-only">后一个</span>
					  </a>
					 </div>
			</div>
			
			
			
			
			<div class="row hot-topic">热门话题</div>
			<c:forEach var="item" items="${topics}">
				<div class="row">
					<div class="topic-square-img">
						<img src="<%=request.getContextPath() %>/static/image/实习.png" alt="暂无图片"/>
					</div>
					<div class="topic-square-section">
						<div class="topic-square-name">
							#${item.topicname }#
						</div>
						<div class="topic-square-detail">
							问答:<span>${item.questions.size() }</span>&nbsp;&nbsp;关注：<span>0</span>
						</div>
						<c:if test="${item.questions.size() ne 0 }">
							<div class="topic-square-content">
								<a>${item.questions[0].qcontent }</a>
							</div>
						</c:if>
					</div>
				</div>
			</c:forEach>
		</div>
		<div class="col-xs-1"></div>

	</div>
</div>
</body>
</html>